<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-06-25 14:45:13
 * @LastEditors: cxguo
 * @LastEditTime: 2020-09-15 22:36:35
-->
<template>
  <div class="select-goods-btns">
    <el-button v-if="isShowGoodsBtn" type="primary" @click="btnSelect">
      选择商品
    </el-button>
    <el-input
      v-if="isShowQrcode"
      ref="qrcCodeInput"
      v-model="insideVal"
      style="width:200px;"
      placeholder="请扫描商品编号/条形码"
      @keydown.enter.native="onKeyEnter"
    />
    <el-button
      v-if="isShowBarcodeBtn"
      type="default"
      @click="()=> {isShowQrcode = !isShowQrcode}"
    >条形码</el-button>
    <el-dialog
      class="dialog-lit"
      append-to-body
      top="10px"
      :visible.sync="dialogVisible"
      width="90%"
    >
      <slot>
        <GoodsList
          ref="goodsList"
          v-bind="$attrs"
        />
      </slot>
      <div slot="title">
        <span>请选择商品</span>
        <span class="fr paddingLR20">
          <el-button type="primary" @click="btnSelectSure">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GoodsListDefault from '@/views/components/SelectGoodsList'
import { oftenuse } from '@/libs/mixins'
import { getSkuByBarcode } from '@/api/goods/goods-sku.js'

export default {
  components: { 'GoodsList': GoodsListDefault },
  mixins: [oftenuse],
  props: {
    btns: {
      type: Array,
      default: () => { return ['selectGoods', 'barcode'] }
    }
  },
  data() {
    return {
      keywords: null,
      dialogVisible: false,
      insideVal: null,
      isShowQrcode: false
    }
  },
  computed: {
    isShowGoodsBtn: function() {
      return this.btns.indexOf('selectGoods') !== -1
    },
    isShowBarcodeBtn: function() {
      return this.btns.indexOf('barcode') !== -1
    }
  },
  watch: {
    'dialogVisible': function(val) {
      if (!val) {
        const goodsList = this.$refs.goodsList
        if (goodsList) {
          goodsList.resetData()
        }
      }
    }
  },
  updated() {
    if (this.isShowQrcode) {
      this.$refs.qrcCodeInput.focus()
    }
  },
  methods: {
    btnSelect() {
      this.dialogVisible = true
    },
    btnSelectSure() {
      const goodsList = this.$refs.goodsList
      const selectData = goodsList ? goodsList.getSelectData() : []
      selectData.forEach(item => {
        item.skuId = item.id
      })
      this.$emit('on-select-sure', selectData)
      this.dialogVisible = false
    },
    searchByQrccode(val) {
      if (!val || val === '') return this.$message.error('请输入条形码！')
      getSkuByBarcode(val).then(res => {
        if (!res.data.flag) return this.$message.error('查询失败！')
        const data = res.data.data
        if (!data) return this.$message.error('该条形码不存在！')
        data.skuId = data.id
        data.quantity = 1
        this.$delete(data, 'id')
        this.$emit('on-select-sure', [data])
        this.insideVal = ''
      })
    },
    onKeyEnter(e) {
      const val = e.target.value
      this.searchByQrccode(val)
    }

  }
}
</script>

<style lang="scss">

</style>
